<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <!-- 导航栏 -->
    <van-nav-bar title="购物车" left-arrow @click-left="back" />

    <van-checkbox-group v-model="checked" @change="togglegroup" ref="checkboxGroup">
        <div class="cart" v-for="(item, key) in list" :key="key">
            <!-- 复选框 name绑定购物车id-->
            <van-checkbox :name="item.id"></van-checkbox>

            <!-- 滑动单元格 -->
            <van-swipe-cell>
                <!-- 商品卡片 -->
                <van-card :price="item.total" :desc="'库存：' + item.product.stock" :title="item.product.name"
                    :thumb="item.product.thumbs_text" @click-thumb="toProductInfo(item.proid)">

                    <!-- 卡片的插槽部分 -->
                    <template #desc v-if="item.attrs">
                        <van-tag v-for="(value, index) in item.attrs" :key="index" type="primary">{{
                            value.value }}</van-tag>
                    </template>

                    <!-- 卡片的商品数量 步进器 -->
                    <template #num>
                        <van-stepper v-model="item.nums" @change="CartUpdate(item)" />
                    </template>
                </van-card>

                <!-- 滑动单元格插槽 右侧滑动 -->
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>

    <!-- 提交动作栏 -->
    <van-submit-bar :price="total" button-text="确认订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" :indeterminate="isIndeterminate" @change="toggle">全选</van-checkbox>
    </van-submit-bar>
</template>

<script setup>
import { computed, getCurrentInstance, onBeforeMount, ref } from 'vue'

const { proxy } = getCurrentInstance()

const back = () => proxy.$router.push('/')

const checked = ref([])
const list = ref([])
const checkedAll = ref(false)
const isIndeterminate = ref(false)
const checkboxGroup = ref(null)


onBeforeMount(() => {
    CartInfo()
})

// 购物车数据查询
const CartInfo = async () => {
    var result = await proxy.$POST({
        url: '/cart/index',
        params: { busid: proxy.$business.value.id }
    })

    if (result.code == 0) {
        proxy.$fial(result.msg)
        return false
    }

    result.data.map(item => item.attrs = JSON.parse(item.attrs))

    list.value = result.data
}

//跳转到购物车详情界面
const toProductInfo = pid => proxy.$router.push({ path: '/product/info', query: { pid } })

// 全选切换
const toggle = () => checkboxGroup.value.toggleAll()

// 判断单个选中
const togglegroup = (value) => {
    const checkedCount = value.length
    checkedAll.value = checkedCount === list.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < list.value.length
}

// 合计的价格
const total = computed(() => {
    var total = 0
    list.value.map((item) => {
        if (checked.value.includes(item.id)) total += parseFloat(item.total)
    })
    return parseFloat(total * 100)
})

// 更新购物车数量
const CartUpdate = async (item) => {
    var result = await proxy.$POST({
        url: '/cart/edit',
        params: { cartid: item.id, nums: item.nums }
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    CartInfo()
}

// 删除购物车
const del = async (item) => {
    proxy.$confirm({
        message: "确认是否删除" + item.product.name + "?",
    }).then(async () => {
        // 发起请求
        let result = await proxy.$POST({
            url: "/cart/del",
            params: { cartid: item.id },
        });

        if (result.code == 0) {
            proxy.$fail(result.msg);
            return false;
        } else {
            CartInfo();
        }
    }).catch(() => { })
}

// 确认订单
const onSubmit = async () => {
    if (checked.value.length <= 0) {
        proxy.$fail('请选择购物车产品')
        return false
    }

    proxy.$router.push({ path: '/cart/confirm', query: { cartids: checked.value.join(',') } })
}

</script>

<style scoped>
:deep(.cart) {
    display: flex;
    width: 100%;
}

::v-deep .van-swipe-cell {
    width: 100%;
}

.van-card {
    background-color: transparent;
}

.delete-button {
    height: 100%;
}

.van-tag {
    margin-right: 5px;
}
</style>